<template>
  <div>
    <el-form label-width="80px" style="top:0;z-index:99; position: sticky; background:#fff" :inline="true">
      <el-form-item>
        <el-button type="primary" @click="switchPlayVideo" size="small"
          >视频预览</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-upload
          class="upload-demo"
          action="/admin/localVideo/uploadWordScreen"
          :on-success="uploadSuccess"
          :headers="headers"
          :show-file-list="false"
          :data="{ videoId,type:1 }"
        >
          <el-button size="small" type="primary">上传英文</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-upload
          class="upload-demo"
          action="/admin/localVideo/uploadWordScreen"
          :on-success="uploadSuccess"
          :headers="headers"
          :show-file-list="false"
          :data="{ videoId,type:2 }"
        >
          <el-button size="small" type="primary">上传中文</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-upload
          class="upload-demo"
          action="/admin/localVideo/uploadWordScreen"
          :on-success="uploadSuccess"
          :headers="headers"
          :show-file-list="false"
          :data="{ videoId ,type:3}"
        >
          <el-button size="small" type="primary">上传英中</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-upload
          class="upload-demo"
          action="/admin/localVideo/uploadWordScreen"
          :on-success="uploadSuccess"
          :headers="headers"
          :show-file-list="false"
          :data="{ videoId ,type:4}"
        >
          <el-button size="small" type="primary">上传中英</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button
          v-if="videoStatus == 0 || videoStatus == 1"
          type="primary"
          size="small"
          @click="supply(videoId)"
        >
          提交审核
        </el-button>
      </el-form-item>
      <el-form-item v-if="videoStatus == 2 && roles.includes('admin')">
        <el-button type="primary" size="small" @click="sure(videoId)">
          确认审核
        </el-button>
      </el-form-item>
      <el-form-item v-if="roles.includes('admin') && (videoStatus == 2 || videoStatus == 3)">
        <el-button type="primary" size="small"  @click="sendBack(videoId)">
          发回重编
        </el-button>
      </el-form-item>
      <el-form-item >
        
        <el-popconfirm
          title="确定清空字幕吗"
          @onConfirm="clearWordScreen(videoId)"
        >
          <!-- <el-button slot="reference">删除</el-button> -->
          <el-button type="danger" slot="reference" size="small">清空字幕</el-button>
        </el-popconfirm>
        <el-button style="margin-left: 10px;" type="primary" @click="download(videoId)" size="small">下载</el-button>
      </el-form-item>
    </el-form>
    <div style="margin-bottom:10px;">
      上传字幕会覆盖原有字幕（请在第一次编辑的时候上传）
    </div>
    <el-table :data="dataList" border stripe>
      <el-table-column type="index" label="序号" width="100px">
      </el-table-column>
      <el-table-column label="开始时间" prop="start"> </el-table-column>
      <el-table-column prop="cn" label="中文"> </el-table-column>
      <el-table-column prop="en" label="英文"> </el-table-column>
      <el-table-column prop="end" label="结束时间"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div>
            <el-button type="primary" @click="openEdit(scope.row,'add')"
              >添加</el-button
            >
            <el-button type="primary" @click="openEdit(scope.row)"
              >编辑</el-button
            >
            <el-button type="danger" @click="del(scope.row)"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-pagination
      :total="total"
      :current-page="query.page"
      :page-size="query.pageSize"
      @current-change="handlePageChange"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination> -->

    <el-dialog  :title="screenData.isAdd ? '字幕添加':'字幕编辑'" :visible.sync="dialogVisible" append-to-body>
      <screen-edit :screenData="screenData" v-on:save="screenSave" />
    </el-dialog>

    <el-dialog
      title="视频预览"
      :visible.sync="videoDialogVisible"
      append-to-body
    >
      <preview-video :videoId="videoId" />
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getToken } from "@/utils/auth";
import {
  getWordScreen,
  supplyWordScreen,
  sureWordScreen,
  sendBackWordScreen,
  clearWordScreen,
  delWordScreen,
  downWordScreen
} from "@/api/video/index";
import ScreenEdit from "@/views/video/components/screenedit";
import PreviewVideo from "@/views/video/components/previewvideo";
export default {
  props: ["videoId", "videoStatus"],
  components: {
    ScreenEdit,
    PreviewVideo
  },
  computed: {
    ...mapGetters(["roles"])
  },
  data() {
    return {
      screenData:{},
      dataList: [],
      headers: {
        Authorization: ""
      },
      query: {
        page: 1,
        pageSize: 100000000,
        videoId: ""
      },
      total: 0,
      dialogVisible: false,
      videoDialogVisible: false,
    };
  },
  watch: {
    videoId: {
      handler: function(val, oldVal) {
        this.query.videoId = val;
        this.getData();
      },
      immediate: true
    }
  },
  mounted() {
    console.log("abc");
    this.headers.Authorization = getToken();
  },
  methods: {
    sure(videoId) {
      sureWordScreen(videoId).then(res => {
        this.$emit("sure");
      });
    },
    sendBack(videoId){
      sendBackWordScreen(videoId).then(res=>{
        //更新列表状态
        this.$emit("sure")
      })
    },
    getData() {
      getWordScreen(this.query).then(res => {
        console.log(res, "res");
        this.total = res.data.total;
        this.dataList = res.data.list;
      });
    },
    handlePageChange(page) {
      this.query.page = page;
      this.getData();
    },
    uploadSuccess(response, file, fileList) {
      if (response.code == 0) {
        this.$message.error(response.msg);
      } else {
        this.getData();
      }
    },
    async download(videoid){
      const res = await downWordScreen(videoid);
      if(res.data){
        window.open(res.data)
      }
    },
    openEdit(row,add) {
      this.screenData = {
        isAdd: add ? true : false,
        id: row.id,
        video_id: row.video_id 
      }
      this.dialogVisible = true;
    },
    async del(row){
      this.$confirm("是否确认删除, 是否继续？","提示").then(async () => {
        const res = await delWordScreen(row.id);
        if(res.code==1){
          this.getData();
        }
      })
    },
    screenSave(data) {
      console.log("保存成功的事件调用");
      this.dialogVisible = false;
      this.getData();
    },
    switchPlayVideo() {
      this.videoDialogVisible = !this.videoDialogVisible;
    },
    supply(videoId) {
      supplyWordScreen(videoId).then(res => {
        this.$emit("sure")
      });
    },
    clearWordScreen(videoId){
      clearWordScreen(videoId).then(res=>{
        this.getData()
      })
    }
  }
};
</script>

<style lang="scss" scoped></style>
